<template>
  <div class="pharmacy-container">
    <!-- 页面头部 -->
    <div class="header">
      <div class="header-content">
        <div class="pharmacy-icon">
          <i class="fas fa-clinic-medical"></i>
        </div>
        <div class="header-text">
          <h1>医院药房管理</h1>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-value">{{ totalMedicines }}</span>
            <span class="stat-label">药品总数</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ pendingPrescriptions }}</span>
            <span class="stat-label">待处理处方</span>
          </div>
        </div>
      </div>
    </div>

    <div class="main-layout">
      <!-- 左侧药品库存 -->
      <div class="left-panel">
        <InventoryManager
          :medicines="medicinesInventory"
          :search="inventorySearch"
          @search-change="handleSearchChange"
          @refresh="refreshAllData"
        />
      </div>

      <!-- 右侧处方处理 -->
      <div class="right-panel">
        <PrescriptionManager
          :prescriptions="prescriptions"
          :filter="prescriptionFilter"
          @filter-change="handleFilterChange"
          @select-prescription="selectPrescription"
        />
      </div>
    </div>

    <!-- 处方详情弹窗 -->
    <div v-if="showPrescriptionDetail" class="modal-overlay" @click="showPrescriptionDetail = false">
      <div class="modal-container" @click.stop>
        <PrescriptionDetail
          :prescription="selectedPrescription"
          :medicines="allMedicines"
          @process="startProcessing"
          @complete="completePrescription"
          @close="showPrescriptionDetail = false"
        />
      </div>
    </div>

    <!-- 购药信息面板 -->
    <div v-if="completedPrescription" class="purchase-panel">
      <div class="panel-header">
        <h3>
          <i class="fas fa-shopping-bag"></i>
          购药信息
        </h3>
        <button class="btn-close-panel" @click="completedPrescription = null">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="panel-content">
        <div class="prescription-summary">
          <div class="summary-item">
            <span class="label">处方号</span>
            <span class="value">{{ completedPrescription.id }}</span>
          </div>
          <div class="summary-item">
            <span class="label">患者姓名</span>
            <span class="value">{{ completedPrescription.patientName }}</span>
          </div>
          <div class="summary-item">
            <span class="label">发药时间</span>
            <span class="value">{{ formatTime(completedPrescription.completeTime) }}</span>
          </div>
        </div>

        <div class="medicines-summary">
          <h4>药品清单</h4>
          <div class="medicines-scroll">
            <div
              v-for="medicine in completedPrescription.medicines"
              :key="medicine.id"
              class="summary-medicine"
            >
              <span class="name">{{ medicine.name }}</span>
              <span class="details">
                <span class="quantity">×{{ medicine.quantity }}</span>
                <span class="price">¥{{ (medicine.price * medicine.quantity).toFixed(2) }}</span>
              </span>
            </div>
          </div>
        </div>

        <div class="payment-section">
          <div class="total-row">
            <span class="total-label">总计金额</span>
            <span class="total-value">¥{{ calculateTotalAmount(completedPrescription) }}</span>
          </div>
          <div class="qr-section">
            <div class="qr-code">
              <div class="qr-placeholder">
                <i class="fas fa-qrcode"></i>
                <p>扫码支付</p>
                <small>支持微信/支付宝</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, computed, onMounted } from 'vue'
import InventoryManager from './components/InventoryManager.vue'
import PrescriptionManager from './components/PrescriptionManager.vue'
import PrescriptionDetail from './components/PrescriptionDetail.vue'
import request from '@/utils/request'

// 响应式数据
const inventorySearch = ref('')
const prescriptionFilter = ref('all')
const showPrescriptionDetail = ref(false)
const selectedPrescription = ref(null)
const completedPrescription = ref(null)

// 药品库存数据
const medicinesInventory = ref([])
// 新增完整药品库存列表
const allMedicines = ref([])

// 处方数据
const prescriptions = ref([])

// 记录所有药品的最小储备量
const MIN_STOCK_LEVEL = 5

// 计算属性
const totalMedicines = computed(() => allMedicines.value.length)
const pendingPrescriptions = computed(() =>
  prescriptions.value.filter(p => p.status === 'pending').length
)

// 方法
const handleSearchChange = (value) => {
  inventorySearch.value = value
  onSearch()
}

const handleFilterChange = (value) => {
  prescriptionFilter.value = value
}

// 修改刷新方法，实现完整的页面刷新功能
const refreshAllData = async () => {
  // 刷新库存数据
  await loadMedicinesInventory();
  // 刷新处方数据
  await loadPrescriptions();
}

const selectPrescription = (prescription) => {
  const processedPrescription = {
    ...prescription,
    medicines: prescription.medicines.map(med => {
      // 查找库存中匹配的药品
      const inventoryMed = allMedicines.value.find(invMed =>
        invMed.id == med.id || invMed.name === med.name
      );
      return {
        ...med,
        // 确保使用库存中的药品ID
        id: inventoryMed ? inventoryMed.id : med.id
      };
    })
  };

  selectedPrescription.value = processedPrescription;
  showPrescriptionDetail.value = true;
}

const startProcessing = () => {
  if (selectedPrescription.value) {
    selectedPrescription.value.status = 'processing'
    updatePrescription(selectedPrescription.value)
  }
}

const completePrescription = () => {
  if (selectedPrescription.value) {
    // 更新库存
    selectedPrescription.value.medicines.forEach(medicine => {
      const inventoryItem = allMedicines.value.find(item => item.id === medicine.id)
      if (inventoryItem) {
        inventoryItem.stock -= medicine.quantity
      }
    })

    // 更新处方状态
    selectedPrescription.value.status = 'completed'
    selectedPrescription.value.completeTime = new Date().toISOString()
    updatePrescription(selectedPrescription.value)

    // 显示购药信息
    completedPrescription.value = { ...selectedPrescription.value }

    showPrescriptionDetail.value = false
  }
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processing': '处理中',
    'completed': '已完成'
  }
  return statusMap[status] || status
}

const formatTime = (timeString) => {
  if (!timeString) return ''
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN')
}

const calculateTotalAmount = (prescription) => {
  if (!prescription || !prescription.medicines) return 0
  return prescription.medicines.reduce((total, medicine) => {
    return total + (medicine.price * medicine.quantity)
  }, 0).toFixed(2)
}

const updatePrescription = (prescription) => {
  const index = prescriptions.value.findIndex(p => p.id === prescription.id)
  if (index !== -1) {
    prescriptions.value[index] = prescription
  }
}

// 搜索功能
const onSearch = async () => {
  try {
    // 如果搜索框为空，则重新加载当前科室的药品列表
    if (!inventorySearch.value.trim()) {
      medicinesInventory.value = [...allMedicines.value];
      return;
    }

    // 如果搜索框有内容，则调用新的 /search 接口
    const response = await request({
      url: '/medicine/search', // 调用新的搜索接口
      method: 'get',
      params: {
        department: 'all', // 当前选中的科室
        keyword: inventorySearch.value.trim()  // 搜索框中的关键词
      }
    });

    if (response.code === 200) {
      medicinesInventory.value = response.data.map(item => ({
        id: item.id,
        name: item.name,
        category: item.specify || '未分类',
        icon: '💊', // 统一设置图标
        stock: item.stock,
        minStock: MIN_STOCK_LEVEL, // 使用统一的最低库存量
        price: item.price || 0
      }));
    } else {
      console.error('搜索药品失败:', response.msg);
    }
  } catch (error) {
    console.error('搜索药品失败：', error);
  }
};

// 初始化数据
const loadMedicinesInventory = async () => {
  try {
    // 从后端获取药品库存数据
    const response = await request({
      url: '/medicine/list',
      method: 'get',
      params: { department: 'all' }
    });

    if (response.code === 200) {
      // 根据后端返回的数据格式调整字段映射
      const mappedData = response.data.map(item => ({
        id: item.id,
        name: item.name,
        category: item.specify || '未分类',
        icon: '💊', // 统一设置图标
        stock: item.stock,
        minStock: MIN_STOCK_LEVEL, // 使用统一的最低库存量
        price: item.price || 0
      }));
      
      // 更新完整药品列表
      allMedicines.value = mappedData;
      // 默认显示全部药品
      medicinesInventory.value = mappedData;
    } else {
      console.error('获取药品库存失败:', response.msg);
    }
  } catch (error) {
    console.error('加载药品库存数据出错:', error);
  }
}

const loadPrescriptions = async () => {
  try {
    // 从后端获取处方数据
    const response = await request({
      url: '/api/resMed/getResWithMedicines',
      method: 'get'
    });

    if (response.code === 200) {
      // 根据后端返回的数据格式转换为前端所需格式
      prescriptions.value = response.data.map(item => {
        // 根据 resolve 字段确定状态
        let status = 'pending';
        if (item.resolve === 1) {
          status = 'pending';
        } else if (item.resolve === 2) {
          status = 'cancelled';
        } else if (item.resolve === 3) {
          status = 'expired';
        }

        // 解析身份证号码获取性别和年龄
        const { gender, age } = parseIdentityInfo(item.identity);

        return {
          id: item.resId,
          createTime: item.createTime,
          doctorName: item.doctorName,
          department: item.department, // 后端已直接返回科室名称
          patientName: item.name,
          patientGender: gender,
          patientAge: age,
          patientIdCard: item.identity,
          status: status,
          medicines: item.medicineList.map(med => {
            // 现在后端直接提供了药品名称和价格，无需再从库存中查找
            return {
              id: med.medId,
              name: med.medName || `药品${med.medId}`,
              icon: '💊',
              specification: '',
              quantity: med.number,
              price: med.price || 0,
              stock: med.stock || 0 // 使用新增的库存字段
            };
          })
        };
      });
    } else {
      console.error('获取处方数据失败:', response.msg);
    }
  } catch (error) {
    console.error('加载处方数据出错:', error);
  }
};

// 根据身份证号码解析性别和年龄
const parseIdentityInfo = (identity) => {
  if (!identity || identity.length !== 18) {
    return { gender: '未知', age: 0 };
  }

  // 获取出生日期(第7-14位)
  const birthYear = parseInt(identity.substring(6, 10));
  const birthMonth = parseInt(identity.substring(10, 12));
  const birthDay = parseInt(identity.substring(12, 14));

  // 计算年龄
  const today = new Date();
  const birthDate = new Date(birthYear, birthMonth - 1, birthDay);
  let age = today.getFullYear() - birthYear;
  if (today.getMonth() < birthMonth - 1 ||
      (today.getMonth() === birthMonth - 1 && today.getDate() < birthDay)) {
    age--;
  }

  // 获取性别(第17位奇数为男，偶数为女)
  const genderCode = parseInt(identity.substring(16, 17));
  const gender = genderCode % 2 === 1 ? '男' : '女';

  return { gender, age };
};

// 新增方法：获取药品列表
const fetchMedicines = async (dept) => {
  try {
    const response = await request({
      url: '/medicine/list',
      method: 'get',
      params: { department: dept }
    })
    const mappedData = response.data.map(item => ({
      id: item.id,
      name: item.name,
      category: item.specify || '未分类',
      icon: '💊',
      stock: item.stock,
      minStock: MIN_STOCK_LEVEL,
      price: item.price || 0
    }))
    
    // 更新完整药品列表
    allMedicines.value = mappedData;
    medicinesInventory.value = mappedData;
    return response.data;
  } catch (error) {
    console.error('获取药品列表失败：', error)
    medicinesInventory.value = []
    return [];
  }
}

// 暴露方法给子组件使用
defineExpose({
  fetchMedicines
})

onMounted(() => {
  loadPrescriptions()
})
</script>

<style scoped>
/* 基础样式 - 与智慧诊疗系统保持一致 */
.pharmacy-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  min-height: 100vh;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #4a6cf7, #6c8aff);
  color: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pharmacy-icon {
  font-size: 42px;
  margin-right: 20px;
}

.header-text h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-text p {
  font-size: 18px;
  margin: 0;
  opacity: 0.9;
}

.header-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 36px;
  font-weight: 700;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

/* 主布局 */
.main-layout {
  display: flex;
  gap: 20px;
  flex: 1;
}

.left-panel {
  flex: 1;
}

.right-panel {
  width: 400px;
}

/* 卡片通用样式 */
.card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f2f5;
}

.card-icon {
  font-size: 20px;
  color: #4a6cf7;
  margin-right: 10px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  flex: 1;
}

.card-actions {
  margin-left: auto;
}

.badge-count {
  background: #4a6cf7;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.card-content {
  padding: 20px 24px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-container {
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
}

.modal-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fc 0%, #f0f2f5 100%);
  border-bottom: 1px solid #e8eaf0;
}

.modal-title-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.modal-icon {
  font-size: 28px;
  color: #4a6cf7;
  margin-top: 4px;
}

.modal-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.modal-subtitle {
  font-size: 14px;
  color: #8f9bb3;
  margin: 0;
}

.btn-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #8f9bb3;
  cursor: pointer;
  padding: 4px;
  transition: all 0.3s;
}

.btn-close:hover {
  color: #1a1a1a;
  transform: scale(1.1);
}

.modal-content {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.info-card {
  background: #f8f9fc;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e8eaf0;
}

.info-card:last-child {
  margin-bottom: 0;
}

.info-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8eaf0;
}

.info-card-title i {
  color: #4a6cf7;
}

.medicines-count {
  font-size: 14px;
  color: #8f9bb3;
  font-weight: normal;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-label {
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.info-value {
  font-size: 16px;
  color: #1a1a1a;
}

.status-value.pending {
  color: #fa5252;
  font-weight: 600;
}

.status-value.processing {
  color: #f59f00;
  font-weight: 600;
}

.status-value.completed {
  color: #0ca678;
  font-weight: 600;
}

/* 药品清单样式 */
.medicines-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.medicine-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e8eaf0;
}

.medicine-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.medicine-details {
  display: flex;
  flex-direction: column;
}

.medicine-name {
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.medicine-spec {
  font-size: 12px;
  color: #8f9bb3;
}

.medicine-quantity {
  margin: 0 20px;
}

.quantity {
  font-weight: 600;
  color: #4a6cf7;
}

.medicine-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.unit-price {
  font-size: 14px;
  color: #8f9bb3;
}

.total-price {
  font-weight: 600;
  color: #1a1a1a;
}

.total-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 2px solid #e8eaf0;
}

.total-label {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.total-amount {
  font-size: 24px;
  font-weight: 700;
  color: #4a6cf7;
}

/* 库存检查样式 */
.stock-check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stock-check-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e8eaf0;
}

.stock-medicine {
  display: flex;
  flex-direction: column;
}

.stock-medicine .medicine-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.required-quantity {
  font-size: 12px;
  color: #8f9bb3;
}

.stock-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.stock-status.in-stock {
  background: #e7f7ef;
  color: #0ca678;
}

.stock-status.low-stock {
  background: #fff9e6;
  color: #f59f00;
}

.stock-status.out-of-stock {
  background: #ffe3e3;
  color: #fa5252;
}

.current-stock {
  font-size: 14px;
}

.status-text {
  font-size: 12px;
}

/* 模态框底部按钮 */
.modal-footer {
  padding: 20px 24px;
  background: #f8f9fc;
  border-top: 1px solid #e8eaf0;
}

.footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.btn-process {
  background: #4a6cf7;
  color: white;
}

.btn-process:hover:not(:disabled) {
  background: #3a5ce5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3);
}

.btn-process:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-complete {
  background: #0ca678;
  color: white;
}

.btn-complete:hover {
  background: #0b956b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(12, 166, 120, 0.3);
}

.btn-secondary {
  background: #e8eaf0;
  color: #555;
}

.btn-secondary:hover {
  background: #d0d0d0;
  transform: translateY(-2px);
}

/* 购药信息面板 */
.purchase-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 350px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  border: 1px solid #e8eaf0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #4a6cf7, #6c8aff);
  color: white;
  border-radius: 16px 16px 0 0;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-close-panel {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  transition: all 0.3s;
}

.btn-close-panel:hover {
  transform: scale(1.1);
}

.panel-content {
  padding: 20px;
}

.prescription-summary {
  margin-bottom: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f2f5;
}

.summary-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.summary-item .label {
  font-weight: 600;
  color: #555;
}

.summary-item .value {
  color: #1a1a1a;
}

.medicines-summary h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #555;
  font-weight: 600;
}

.medicines-scroll {
  max-height: 150px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.summary-medicine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
}

.summary-medicine:last-child {
  border-bottom: none;
}

.summary-medicine .name {
  flex: 1;
}

.summary-medicine .details {
  display: flex;
  gap: 12px;
}

.payment-section {
  border-top: 2px solid #f0f2f5;
  padding-top: 16px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.total-label {
  font-weight: 600;
  color: #1a1a1a;
}

.total-value {
  font-size: 20px;
  font-weight: 700;
  color: #4a6cf7;
}

.qr-section {
  text-align: center;
}

.qr-code {
  display: inline-block;
}

.qr-placeholder {
  padding: 20px;
  background: #f8f9fc;
  border-radius: 10px;
  border: 2px dashed #e8eaf0;
  min-width: 150px;
}

.qr-placeholder i {
  font-size: 48px;
  color: #4a6cf7;
  margin-bottom: 8px;
}

.qr-placeholder p {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 600;
}

.qr-placeholder small {
  font-size: 12px;
  color: #8f9bb3;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-layout {
    flex-direction: column;
  }

  .right-panel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .pharmacy-container {
    padding: 16px;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .pharmacy-icon {
    margin-right: 0;
  }

  .header-stats {
    justify-content: center;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .purchase-panel {
    position: static;
    width: 100%;
    margin-top: 20px;
  }

  .modal-container {
    margin: 20px;
  }

  .footer-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}
</style>